<template>
	<view>
		<view class="home_head">
			<image src="https://img1.baidu.com/it/u=3021407189,3889477584&fm=26&fmt=auto" mode="aspectFill"
				class="head_image"></image>
			<dsl-navbar title="昵称" textTitle="white" backBg="white" isBack></dsl-navbar>
			<view class="align-center user_info">
				<image src="/static/message/userHome/imggerenxinxi.png" mode="widthFix" style="width: 44rpx;"></image>
				<view class="margin-left-sm text-white">个人信息</view>
			</view>
		</view>
		<view class="flex align-center justify-between padding-lr-sm" style="margin-top: -60rpx;">
			<view>
				<image src="https://img2.baidu.com/it/u=4183146585,2121935578&fm=26&fmt=auto" mode="aspectFill"
					class="user_image"></image>
			</view>
			<view class="user_message ">
				<view>

					<view class="align-center rowsb ">
						<view>希希公主</view>
						<view>
							<image src="/static/message/userHome/imgjiahaoyou-1.png" mode="" class="user_icon"></image>
							<image src="/static/message/userHome/imgxiangji-1.png" mode=""
								class="user_icon margin-left">
							</image>
						</view>
					</view>
					<view class="align-center">
						<view class="table one_overflow" style="background-color: #F1E6F7;">
							22岁
						</view>
						<view class="table one_overflow" style="background-color: #C4CCD7;">
							22岁
						</view>
						<view class="table one_overflow" style="background-color: #E1E6E0;">
							45kg
						</view>
						<view class="align-center table one_overflow" style="background-color: #FAE9D5;">
							<image src="/static/message/userHome/imgzuanshi-1.png" mode="widthFix"
								style="width: 30rpx;">
							</image>
							30-40/min
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="padding">
			<view class="align-center">
				<image src="/static/message/userHome/imggeren.png" mode="widthFix" style="width: 33rpx;"></image>
				<text class="margin-left-sm">个人优势</text>
			</view>
			<view class="flex flex-wrap ">
				<view v-for="(item,index) in tableList" class="table2 margin-top" s style="background-color: #EDCED3;">
					{{item.title}}
				</view>
			</view>
			<view class="align-center margin-tb">
				<image src="/static/message/userHome/imgpingjia.png" mode="widthFix" style="width: 33rpx;"></image>
				<text class="margin-left-sm">通话评价</text>
			</view>
			<view>
				<view class="align-center margin-bottom">
					<image src="/static/user/modules/imgxingxing-1.png" mode="widthFix" style="width: 40rpx;"></image>
					<text class="margin-left-sm" style="color: #B7BED8;">4.0</text>
					<!-- <image src="/static/user/modules/imgxingxing-2.png" mode=""></image> -->
				</view>
			</view>
			<view class="text-bold text-xl">
				动态
			</view>
			<view class="flex flex-wrap rowsb">
				<view class="avtive margin-top-sm" v-for="(item,index) in 5">
					<image src="https://img0.baidu.com/it/u=4011545296,515958152&fm=26&fmt=auto" mode="aspectFill"
						class="avtive"></image>
						<view class="active_bottom">
							擅长唱歌跳舞
						</view>
				</view>
			</view>
		</view>
		<view class="rowsa position" style="bottom: 30rpx;">
			<view class="submit1" @click="chatMessage()">私信</view>
			<view class="submit2">视频</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableList: [{
						title: '声音好听',
					},
					{
						title: '擅长唱歌跳舞',
					},
					{
						title: '喜欢画画',
					},
					{
						title: '文艺青年',
					},
					{
						title: '美女',
					}
				]
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {
			//私信
			chatMessage(){
				uni.navigateTo({
					url:'/pages/chat/chat'
				})
			}
		},
		computed: {},
		components: {}
	}
</script>

<style lang="scss" scoped>
	.home_head {
		width: 750rpx;
		height: 500rpx;
		position: relative;
	}

	.head_image {
		width: 750rpx;
		height: 500rpx;
		background: #FFFFFF;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: -1;
		border-radius: 0rpx 0rpx 99rpx 99rpx;
	}

	.user_info {
		position: absolute;
		bottom: 100rpx;
		left: 30rpx;
	}

	.user_image {
		width: 142rpx;
		height: 142rpx;
		background: #EEEEEE;
		border: 10rpx solid white;
		border-radius: 50%;
		opacity: 1;
	}

	.user_message {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 553rpx;
		height: 165rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 10rpx;
		box-shadow: 0px 3px 6rpx rgba(196, 231, 255, 0.36);
	}

	.user_icon {
		width: 48rpx;
		height: 48rpx;
	}

	.table {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: red;
		border-radius: 9rpx;
		font-size: 22rpx;
		margin-right: 10rpx;
	}

	.table2 {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: red;
		border-radius: 999rpx;
		font-size: 22rpx;
		margin-right: 10rpx;
	}

	//动态
	.avtive {
		width: 342rpx;
		height: 500rpx;
		border-radius: 10rpx;
		position: relative;
	}
	.active_bottom{
		width: 342rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, 0.5);
		opacity: 1;
		border-radius: 0px 0px 10rpx 10rpx;
		color: white;
		line-height: 80rpx;
		padding-left: 30rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}
	.position {
		position: fixed;
		left: 0;
		right: 0;
		z-index: 99;
	}
	.submit1 {
		width: 260rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #707070;
		opacity: 1;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
	}
	
	.submit2 {
		width: 260rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
	}
</style>
